<template>
  <view>
    <view class="searchGood" >
      <view class="search acea-row row-between-wrapper">
        <view class="input acea-row row-between-wrapper">
			<view class="s-input-tab">
				<view class="s-input-tab-txt" @click="showSelectClick">{{searchType}}</view>
				<view class="s-input-tab-nav on"    v-if="showSelect">
					<ul>
						<li class="all" @click="selectSearchType('商品')">商品</li>
						<li class="shop" @click="selectSearchType('店铺')">店铺</li>
					</ul>
				</view>
			</view>
          <!-- <form @submit.prevent="submit"></form> -->
          <input type="text" placeholder="请点击搜索" confirm-type="search" @confirm="onSearch" v-model="search" />
        </view>
        <view class="bnt" @click="submit"><text class="iconfont icon-sousuo2"></text>搜索</view>
      </view>
      <view v-if="keywords.length">
        <view class="title">热门搜索</view>
        <view class="list acea-row">
          <view
            class="item"
            v-for="keywordsKey of keywords"
            :key="keywordsKey"
            @click="toSearch(keywordsKey)"
          >{{ keywordsKey }}</view>
        </view>
      </view>
      <view class="line"></view>
      <!--      <GoodList></GoodList>-->
    </view>
    <!--<view class="noCommodity">-->
    <!--<view class="noPictrue">-->
    <!--<image src="http://mall-image.hxyrfwpt.com/static/images/noSearch.png" class="image" />-->
    <!--</view>-->
    <!--<recommend></recommend>-->
    <!--</view>-->
  </view>
</template>
<script>
// import GoodList from "@/components/GoodList";
import { getSearchKeyword } from "@/api/store";
import { trim } from "@/utils";
// import Recommend from "@/components/Recommend";
export default {
  name: "GoodSearch",
  components: {
    // Recommend,
    // GoodList
  },
  props: {},
  data: function() {
    return {
      keywords: [],
      search: "",
	  showSelect:false,
	  searchType:"商品"
    };
  },
  mounted: function() {
    this.getData();
  },
  methods: {
	  showSelectClick(){
		  this.showSelect = !this.showSelect;
		  // alert(this.showSelect);
	  },
	  selectSearchType(typeName){
	    this.searchType = typeName;
		this.showSelect = false;
	  },
	  onSearch(){
		  const search = trim(this.search) || "";
		  if (!search) return;
		   
		  if(this.searchType=="店铺"){
		  		   this.$yrouter.push({ path: "/pages/shop/StoreList/search", query: {search} });
		  }else{
		  		   this.toSearch(search);
		  }
	  },
    submit() {
      const search = trim(this.search) || "";
      if (!search) return;
 
	  if(this.searchType=="店铺"){
		   this.$yrouter.push({ path: "/pages/shop/StoreList/search", query: {search} });
	  }else{
		   this.toSearch(search);
	  }
     
    },
    toSearch(s) {
      this.$yrouter.push({ path: "/pages/shop/GoodsList/index", query: { s } });
    },
    getData() {
      getSearchKeyword().then(res => {
        this.keywords = res.data;
      });
    }
  }
};
</script>
<style >

.noCommodity {
/*  border-top: 0.05*100rpx solid #f5f5f5; */
}
/*搜索*/
.searchGood .search .input{
	    padding: 0;
}
.s-input-tab{
	display: inline-block;
	position: relative;
}
.s-input-tab .s-input-tab-txt {
    width: 56px;
    height: 30px;
    line-height: 30px;
    text-indent: 10px;
    color: #999;
    font-size: 14px;
}
.s-input-tab .s-input-tab-txt:after {
    content: '';
    position: absolute;
    width: 6px;
    height: 3px;
    background-repeat: no-repeat;
    background-image:url(http://mall-image.hxyrfwpt.com/static/search-arrow.png);
    background-size: 6px 3px;
    top: 13px;
    right: 8px;
}
.s-input-tab .s-input-tab-nav {
    position: absolute;
    left: 0;
    top: 30px;
    z-index: 101;
    padding: 10px;
}
ul, ol, li {
    list-style: none;
}
.s-input-tab .s-input-tab-nav ul {
    background: #484d50;
    border-radius: 6px;
    width: 140px;
    overflow: hidden;
    color: #c7c8c9;
	padding-left: 0;
}
.s-input-tab .s-input-tab-nav ul:after{
	position:absolute;
	left:20px;
	top:5px;
	content:'';
	display:inline-block;
	width:10px;
	height:10px;
	background:#484d50;
	-webkit-transform:rotate(45deg)
}

.s-input-tab .s-input-tab-nav li {
    border-top: 1px solid #707476;
    margin-top: -1px;
    height: 35px;
    line-height: 35px;
	padding-left: 15px;
	font-size: 14px;
}

</style>
